home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Menus CSS / horizontal-menu.izs < prev   
Text File  |  2005-09-02  |  3KB  |  110 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>CSS Horizontal hover menu
  4. <!/TITLE>
  5.  
  6. <!BROWSER>FF1+ IE5+ Opr7+<!/BROWSER>
  7.  
  8. <!DESCRIPTION>A CSS horizontal menu with links that hovers up when the mouse moves over them. In non IE modern browsers such as Firefox and Opera7+, the links depress as well on mousedown. 100% CSS, no scripting involved.
  9. <!/DESCRIPTION> 
  10.  
  11. <!CATEGORY>drop down menus - css<!/CATEGORY>
  12.  
  13. <!SCRIPT>
  14. <!-- START OF SCRIPT -->
  15. <!-- Step 1: Insert the following style sheet to the HEAD section of your page: -->
  16. <style type="text/css">
  17.  
  18. .hovermenu ul{
  19. font: bold 13px arial;
  20. padding-left: 0;
  21. margin-left: 0;
  22. height: 20px;
  23. }
  24.  
  25. .hovermenu ul li{
  26. list-style: none;
  27. display: inline;
  28. }
  29.  
  30. .hovermenu ul li a{
  31. padding: 2px 0.5em;
  32. text-decoration: none;
  33. float: left;
  34. color: black;
  35. background-color: #FFF2BF;
  36. border: 2px solid #FFF2BF;
  37. }
  38.  
  39. .hovermenu ul li a:hover{
  40. background-color: #FFE271;
  41. border-style: outset;
  42. }
  43.  
  44. html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
  45. border-style: inset;
  46. }
  47. </style>
  48. <!-- Step 2: Add the below HTML  to the body of your page. -->
  49. <div class="hovermenu">
  50. <ul>
  51. <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
  52. <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
  53. <li><a href="http://www.codingforums.com">Coding Forums</a></li>
  54. <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
  55. <li><a href="http://www.google.com">Google</a></li>
  56. </ul>
  57. </div>
  58. <!-- END OF SCRIPT -->
  59. <!/SCRIPT>
  60.  
  61. <!PREVIEW>
  62. <!-- START OF SCRIPT -->
  63. <!-- Step 1: Insert the following style sheet to the HEAD section of your page: -->
  64. <style type="text/css">
  65.  
  66. .hovermenu ul{
  67. font: bold 13px arial;
  68. padding-left: 0;
  69. margin-left: 0;
  70. height: 20px;
  71. }
  72.  
  73. .hovermenu ul li{
  74. list-style: none;
  75. display: inline;
  76. }
  77.  
  78. .hovermenu ul li a{
  79. padding: 2px 0.5em;
  80. text-decoration: none;
  81. float: left;
  82. color: black;
  83. background-color: #FFF2BF;
  84. border: 2px solid #FFF2BF;
  85. }
  86.  
  87. .hovermenu ul li a:hover{
  88. background-color: #FFE271;
  89. border-style: outset;
  90. }
  91.  
  92. html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
  93. border-style: inset;
  94. }
  95. </style>
  96. <!-- Step 2: Add the below HTML  to the body of your page. -->
  97. <div class="hovermenu">
  98. <ul>
  99. <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
  100. <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
  101. <li><a href="http://www.codingforums.com">Coding Forums</a></li>
  102. <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
  103. <li><a href="http://www.google.com">Google</a></li>
  104. </ul>
  105. </div>
  106.  
  107. <!-- END OF SCRIPT -->
  108. <!/PREVIEW>
  109.  
  110. <!RELATED>NONE<!/RELATED>